<template>
  <div class="class">
    <div class="common_showBox bx">
      <div class="common_searchBox br mb14">
        <div class="searchBox longBox bx">
          <img src="static/images/search.png" alt="" srcset="">
          <input type="text" placeholder="ID/名称" v-model="key" @keydown.13="queryBtn">
        </div>
        <span class="ml30">届次：</span>
        <div class="chooseBox bx down w180 class_status">
          <selectMk :liDataGet="classStatus" @change="change" dataType='class_status'></selectMk>
        </div>
        <!-- <div class="queryBtn" @click="queryBtn">查询</div> -->
        <el-button type="primary" class="queryBtn" :loading="queryBtnFlag" @click="queryBtn">查询</el-button>
      </div>
      <div class="common_titleBox br bx">
        <div class="common_title bx">
          <div class="common_title_left">班级信息</div>
          <div class="common_title_right">
            <div class="common_title_btn" @click="openLayer()">新增</div>
            <div class="common_title_btn" @click="deletBtn()">删除</div>
            <!-- <div class="common_title_btn" @click="setTeacher()">设置任课老师</div> -->
            <div class="common_title_btn" @click="openAddBatch">批量新增</div>
          </div>
        </div>
        <div class="common_form bx">
          <el-table ref="multipleTable" :data="tableData3" tooltip-effect="dark" style="width: 100%;height: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" prop="checkFlag"></el-table-column>
            <el-table-column label="序号" prop="num" width="60">
            </el-table-column>
            <el-table-column prop="id" label="班级ID" width="100" show-overflow-tooltip></el-table-column>
            <el-table-column prop="class_name" label="班级名称" show-overflow-tooltip ></el-table-column>
            <el-table-column prop="year" label="年级" show-overflow-tooltip ></el-table-column>
            <el-table-column prop="start_year" label="届次" show-overflow-tooltip ></el-table-column>
            <el-table-column prop="teacher_name" label="班主任" show-overflow-tooltip ></el-table-column>
            <el-table-column prop="start_date" label="更新时间" show-overflow-tooltip ></el-table-column>
            <el-table-column prop="status" label="状态" show-overflow-tooltip ></el-table-column>
            <el-table-column label="操作" width="218">
              <template slot-scope="scope">
                <span class="clickBtn" @click="handleSet(scope.$index, scope.row)">设置任课老师</span>
                <span class="clickBtn" @click="handleEdit(scope.$index, scope.row)">修改</span>
                <span class="clickBtn" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</span>
              </template>
            </el-table-column>
          </el-table>
          <div class="common_form_btnBox">
            <div @click="minPageFlag &&minPage()" class="common_form_btn_min" :class="{disableClick:!minPageFlag}">首页</div>
            <img :src="minPageFlag?'static/images/last.png':'static/images/lastNo.png'" alt="上一页" @click="minPageFlag &&lastPage()"
              class="common_form_btn_last">
            <div class="common_form_btn_num">{{page}}</div>
            <img :src="maxPageFlag?'static/images/next.png':'static/images/nextNo.png'" alt="下一页" @click="maxPageFlag &&nextPage()"
              class="common_form_btn_next">
            <div @click="maxPageFlag &&maxPage()" class="pages_form_btn_max" :class="{disableClick:!maxPageFlag}">尾页</div>
            <div class="common_form_btn_total">总共{{totalPage}}页</div>
          </div>
        </div>
      </div>
    </div>
    <div class="common_alertBox addClass" v-if="addClassFlag">
      <div class="common_alertBox_header" v-if='!modifyFlag'>
        <span>新增班级</span>
      </div>
      <div class="common_alertBox_header" v-if='modifyFlag'>
        <span>修改班级</span>
      </div>
      <div class="common_alertBox_content">
        <div class="common_alertBox_li">
          <div class="common_alertBox_li_left ">
            <span class="importentIcon">学段：</span>
            <div class="chooseBox down hideInput">
                <div class="maskIpnut">{{addClassData.typeT}}</div>
              <selectMk :liDataGet="gradeType" @change="change" dataType="gradeType"></selectMk>
            </div>
          </div>
          <div class="common_alertBox_li_right">
            <span class="importentIcon">开班日期：</span>
            <div class="chooseBox date paddingInput">
              <el-date-picker v-model="addClassData.start_date" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" @change='dateChange'>
              </el-date-picker>
            </div>
          </div>
        </div>
        <div class="common_alertBox_li">
          <div class="common_alertBox_li_left ">
              <span class="importentIcon">当前年级：</span>
              <div class="chooseBox paddingInput disabled">
                <input type="text" v-model="addClassData.year" disabled>
              </div>

          </div>
          <div class="common_alertBox_li_right">
              <span class="importentIcon">班级名称：</span>
              <div class="chooseBox paddingInput">
                <input type="number" v-model="addClassData.name" min="1">
                <div class="tip">班</div>
              </div>
          </div>
        </div>
        <div class="common_alertBox_li">
          <div class="common_alertBox_li_left ">
            <span >班级别名：</span>
            <div class="chooseBox paddingInput">
              <input type="text" v-model="addClassData.nickname">
            </div>
          </div>
          <div class="common_alertBox_li_right">
              <span class="importentIcon">班主任：</span>
            <div class="chooseBox down hideInput">
                <div class="maskIpnut">{{addClassData.headteacher_name}}</div>
              <selectMk :liDataGet="teachList" @change="change" dataType='teacherList'></selectMk>
            </div>
          </div>
        </div>
        <!-- <div class="common_alertBox_li">
            <div class="common_alertBox_li_left ">
              <span class="importentIcon">班级别名：</span>
              <div class="chooseBox down">
                <selectMk :liDataGet="liDataGet" @change="change"></selectMk>
              </div>
            </div>
            <div class="common_alertBox_li_right">
             
            </div>
          </div> -->
      </div>
      <div class="common_alertBox_footer">
        <!-- <div class="common_alertBox_footer_btn sureBtn" @click="addClassSureBtn" v-if='!modifyFlag'>保存</div> -->
        <el-button type="primary" class="common_alertBox_footer_btn sureBtn" :loading="addClassSureFlag" @click="addClassSureBtn"
          v-if='!modifyFlag'>保存</el-button>
        <el-button type="primary" class="common_alertBox_footer_btn sureBtn" :loading="modifySureFlag" @click="modifySureBtn" v-if='modifyFlag'>修改</el-button>
        <!-- <div class="common_alertBox_footer_btn sureBtn" @click="modifySureBtn" v-if='modifyFlag'>修改</div> -->
        <el-button type="primary" class="common_alertBox_footer_btn cancelBtn" @click="cancelBtn">取消</el-button>
      </div>
    </div>
    <div class="common_alertBox addClass" v-if="addBatchFlag">

      <div class="common_alertBox_header">
        <span>批量新增</span>
      </div>
      <div class="common_alertBox_content">
        <div class="common_alertBox_li">
          <div class="common_alertBox_li_left ">
            <span class="importentIcon">学段：</span>
            <div class="chooseBox down">
              <selectMk :liDataGet="gradeType" @change="change" dataType="gradeType"></selectMk>
            </div>
          </div>
          <div class="common_alertBox_li_right">
            <span class="importentIcon">开班日期：</span>
            <div class="chooseBox date paddingInput">
              <el-date-picker v-model="addClassData.start_date" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" @change='dateChange'>
              </el-date-picker>
            </div>
          </div>
        </div>
        <div class="common_alertBox_li">
          <div class="common_alertBox_li_left ">
            <span class="importentIcon">数量：</span>
            <div class="chooseBox paddingInput">
              <input type="number" v-model="addClassData.num" min="1" max="50">
            </div>
          </div>
          <div class="common_alertBox_li_right">

          </div>
        </div>

        <!-- <div class="common_alertBox_li">
            <div class="common_alertBox_li_left ">
              <span class="importentIcon">班级别名：</span>
              <div class="chooseBox down">
                <selectMk :liDataGet="liDataGet" @change="change"></selectMk>
              </div>
            </div>
            <div class="common_alertBox_li_right">
             
            </div>
          </div> -->
      </div>
      <div class="common_alertBox_footer">


        <el-button type="primary" class="common_alertBox_footer_btn sureBtn" :loading="addBatchBtnFlag" @click="addBatchBtn">保存</el-button>
        <el-button type="primary" class="common_alertBox_footer_btn cancelBtn" @click="cancelBtn">取消</el-button>
      </div>
    </div>

    <div class="classManagement_alertBox setTeacher" v-if="setTeacherFlag">
      <div class="message-box__header">
        <span>设置任课老师</span>
      </div>
      <div class="message-box__content">
        <div class="common_alertBox_li title">
          <div class="common_alertBox_li_left ">
            科目
          </div>
          <div class="common_alertBox_li_right">
            老师
          </div>
        </div>
        <div class="common_alertBox_li" v-for="(item, index) in setTeacherData">
          <div class="common_alertBox_li_left ">
            <div class="chooseBox ">
              <span>{{item.course_name}}</span>
            </div>
          </div>
          <div class="common_alertBox_li_right">
            <div class="chooseBox down  hideInput">
              <div class="maskIpnut">{{item.teacher_name}}</div>
              <selectMk :liDataGet="teachList" :item="item" :index="index" @change="change" dataType='chooseTeacher'></selectMk>
            </div>
          </div>
        </div>
      </div>
      <div class="common_alertBox_footer">
        <!-- <div class="common_alertBox_footer_btn sureBtn" @click="setTeacherSureBtn()">保存</div> -->
        <el-button type="primary" class="common_alertBox_footer_btn sureBtn" :loading="setTeacherSureFlag" @click="setTeacherSureBtn">保存</el-button>
        <el-button type="primary" class="common_alertBox_footer_btn cancelBtn" @click="cancelBtn">取消</el-button>



      </div>
    </div>
  </div>

  </div>
</template>

<script>
  import {
    http
  } from "../../../api/config"; //引入请求

  export default {
    name: 'home',
    data() {
      return {
        queryBtnFlag: false,
        addClassSureFlag: false,
        modifySureFlag: false,
        addBatchBtnFlag: false,
        setTeacherSureFlag: false,
        changeIndex:0,//选择
        teachList: [],
        gradeType: [{ //学段
          value: '小学'
        }, {
          value: '初中'
        }, {
          value: '高中'
        }],
        classStatus: [{
          value: '全部',
          id: 0
        },{ //班级状态,1:应届(默认),2.往届,3:禁用,传0显示全部状态数据
          value: '应届',
          id: 1
        }, {
          value: '往届',
          id: 2
        }, {
          value: '禁用',
          id: 3
        }],
        searchData: '',
        addClassData: {
          name: '',
          headteacher_id: '',
          headteacher_name:'请选择',
          start_date: '',
          type: 1,
          typeT: '小学',
          nickname: '',
          year: '',
          num: 1,
        },
        key: '',
        status: 0,
        addClassFlag: false, //添加班级开关
        setTeacherFlag: false, //设置老师开关
        addBatchFlag: false, //批量新增
        setTeacherClassId: '',
        modifyFlag: false,
        page: 1, //初始页数
        pagesize: 10, //页数条数
        minPageFlag: false, //最小页面开关
        maxPageFlag: true, //最大页面开关
        totalPage: 0, //总共页数
        tableData3: [{"id":14,"class_name":"50班","nickname":"","headteacher_id":26,"teacher_name":"威整天","start_date":"2018-08-22","start_year":2018,"student_num":0,"type":"3","status":"应届","admin":1,"typeT":"高中","year":"高中1年级","num":1,"checkFlag":false},{"id":13,"class_name":"1班","nickname":"","headteacher_id":26,"teacher_name":"威整天","start_date":"2018-08-22","start_year":2018,"student_num":0,"type":"3","status":"应届","admin":1,"typeT":"高中","year":"高中1年级","num":2,"checkFlag":false},{"id":9,"class_name":"3班","nickname":"","headteacher_id":25,"teacher_name":"李小蛋","start_date":"2018-08-17","start_year":2018,"student_num":14,"type":"3","status":"应届","admin":1,"typeT":"高中","year":"高中1年级","num":3,"checkFlag":false},{"id":7,"class_name":"4班","nickname":"三蛋班","headteacher_id":24,"teacher_name":"李三蛋","start_date":"2018-08-08","start_year":2018,"student_num":16,"type":"3","status":"应届","admin":24,"typeT":"高中","year":"高中1年级","num":4,"checkFlag":false},{"id":12,"class_name":"4班","nickname":"fg","headteacher_id":26,"teacher_name":"威整天","start_date":"2018-08-07","start_year":2018,"student_num":0,"type":"2","status":"应届","admin":1,"typeT":"初中","year":"初中1年级","num":5,"checkFlag":false},{"id":11,"class_name":"4班","nickname":"","headteacher_id":23,"teacher_name":"李允蛋","start_date":"2018-08-17","start_year":2018,"student_num":0,"type":"1","status":"应届","admin":1,"typeT":"小学","year":"小学1年级","num":6,"checkFlag":false},{"id":10,"class_name":"5班","nickname":"","headteacher_id":24,"teacher_name":"李三蛋","start_date":"2018-08-17","start_year":2018,"student_num":0,"type":"1","status":"应届","admin":1,"typeT":"小学","year":"小学1年级","num":7,"checkFlag":false},{"id":8,"class_name":"21班","nickname":"","headteacher_id":26,"teacher_name":"威整天","start_date":"2018-04-02","start_year":2018,"student_num":0,"type":"1","status":"","admin":1,"typeT":"小学","year":"小学1年级","num":8,"checkFlag":false},{"id":6,"class_name":"3班","nickname":"","headteacher_id":1,"teacher_name":"管理员老师","start_date":"2018-08-01","start_year":2018,"student_num":8,"type":"1","status":"应届","admin":1,"typeT":"小学","year":"小学1年级","num":9,"checkFlag":false},{"id":2,"class_name":"2班","nickname":"","headteacher_id":1,"teacher_name":"管理员老师","start_date":"2018-08-11","start_year":2018,"student_num":10,"type":"1","status":"应届","admin":1,"typeT":"小学","year":"小学1年级","num":10,"checkFlag":false}], //接收数据
        setTeacherData: [],
        multipleSelection: [], //多选按钮
        handleEdit(index, row) { //修改事件row
          //console.log(index, row);
          this.addClassFlag = true;
          this.modifyFlag = true;
          this.addClassData = JSON.parse(JSON.stringify(row));
          this.addClassData.name =   this.addClassData.class_name;
          this.addClassData.headteacher_name = this.addClassData.teacher_name;
          // this.addClassData.headteacher_name = this.addClassData.teacher_id;
          this.addClassData.name=parseInt( this.addClassData.class_name)
          // console.log( this.addClassData);
          // // headteacher_id:
          //  this.addClassData.start_date=row.start_date;
          //  this.addClassData.type=row.type;
          //  this.addClassData.nickname=row.nickname;
          //  this.addClassData.year=row.year;


          this.classData = [{
            value: this.addClassData.teacher_name
          }]
          // if (row.birthday == "0000-00-00") {
          //   this.studentData.birthday = '';
          // }


          $('.mask').show();

        },
        handleSet(index, row) {
          //console.log(row)
          this.setTeacherFlag = true;
          this.setTeacherClassId = row.id;
          this.getSetTeacherData(row.id)
          $('.mask').show();
        },
        handleDelete(index, row) {
          //console.log(index, row);
          //console.log(row.id)
          // this.addTeacherFlag = false;
          // this.modifyFlag = false;
          // $('.mask').hide();
          var _this = this;
          this.$confirm('此操作将永久删除' + row.class_name + ', 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {




          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
        }
      }
    },
    methods: {
      change: function (e) { //下拉框插件改变
        switch (e.dataType) {
          case 'gradeType':
            this.addClassData.typeT = e.val;
            this.addClassData.type = e.index;
            this.addClassData.year = this.countYear(this.addClassData.start_date,this.addClassData.type)
            break;
          case 'teacherList':
          let arr= this.addClassData;
          this.addClassData='';
          
           arr.headteacher_name = e.val;
            arr.headteacher_id = e.id;
            this.addClassData=arr;
        
            break;
          case 'class_status':
            this.status = e.id;
            this.changeIndex++;
            break;
          case 'chooseTeacher':
            var arr = this.setTeacherData;
            this.setTeacherData = [];
            arr[e.index] = {
              course_id: e.course_id,
              course_name: e.course_name,
              teacher_id: e.teacher_id,
              teacher_name: e.teacher_name
            }
            this.setTeacherData = arr;
            break;

        }

      },
      queryBtn() {
        if(this.key==''&&this.changeIndex==0){

        }else{
          this.queryBtnFlag = true;
        this.tableData3 = [];
        var page = 1;
        var pagesize = this.pagesize;
          this.getData(page, pagesize);
          this.changeIndex=0;
        }

      },
      dateChange(e) { //日期

        this.addClassData.year = this.countYear(e,this.addClassData.type)

      },



      openLayer() { //显示添加班级弹窗
        this.addClassFlag = true;

        $('.mask').show();
      },
      openAddBatch() {
        this.addBatchFlag = true;
        $('.mask').show();
      },
      setTeacher() { //设置教师
        //console.log(this.multipleSelection)
        var _this = this;
        var idStr = '';
        if (this.multipleSelection.length == 0) {
          this.$message({
            type: 'warning',
            message: '请选择班级'
          });
          return;
        } else if (this.multipleSelection.length == 1) {
          idStr = this.multipleSelection[0].id;
          this.setTeacherFlag = true;
          this.setTeacherClassId = idStr;
          this.getSetTeacherData(idStr)
        }
        //     else{

        //  this.multipleSelection.map(function (e) {
        //    idStr += e.id + ','
        //    idStr = idStr.substring(0, idStr.length - 1);
        //  });

        //  }



        $('.mask').show();
      },
      getSetTeacherData(id) {
        var _this = this;



      },
      deletBtn() { //删除按钮
        //console.log(this.multipleSelection)
        var _this = this;
        if (this.multipleSelection.length == 0) {
          this.$message({
            type: 'warning',
            message: '请选择班级'
          });
          return;
        }
        var nameStr = '';
        var idStr = '';
        this.multipleSelection.map(function (e) {
          //console.log(e)
          nameStr += e.class_name + '、';
          idStr += e.id + ','
        });
        nameStr = nameStr.substring(0, nameStr.length - 1);
        idStr = idStr.substring(0, idStr.length - 1);
        //console.log(idStr)
        this.$confirm('此操作将永久删除' + nameStr + ', 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {



        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      toggleSelection(rows) { //全选
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val; //选中数据
      },
      getData(page, pagesize) { //获取数据
        let _this = this;
        _this.maxPageFlag = false;
        _this.minPageFlag = false;
        var page = page;
        var pagesize = pagesize;
        var key = _this.key;
        var status = _this.status;



      },
      nextPage() { //下一页
        var page = this.page + 1;
        var pagesize = this.pagesize;
        this.getData(page, pagesize)
      },
      lastPage() { //上一页
        var page = this.page - 1;
        var pagesize = this.pagesize;
        this.getData(page, pagesize);
      },
      minPage() { //首页
        var page = 1;
        var pagesize = this.pagesize;
        this.getData(page, pagesize);
      },
      maxPage() { //尾页
        var page = this.totalPage;
        var pagesize = this.pagesize;
        this.getData(page, pagesize);
      },
      modifySureBtn() {


        let _this = this;
        var id = this.addClassData.id;
        _this.modifySureFlag = true;


      },
      cancelBtn() { //取消按钮
        this.addClassFlag = false;
        this.setTeacherFlag = false;
        this.addBatchFlag = false;
        this.addBatchBtnFlag = false;
        this.modifyFlag = false;
        this.modifySureFlag = false;
        this.addClassSureFlag = false;
        this.setTeacherSureFlag = false;
        this.addClassData = {
          name: '',
          headteacher_id: '',
          headteacher_name:'请选择',
          start_date: '',
          type: 1,
          typeT: '小学',
          nickname: '',
          year: '',
          num: 1,
        };
        $('.mask').hide();
      },
      setTeacherSureBtn() { //设置教师确定按钮

        var list = [];
        // var list=[{"teacher_id":1,"course_id":1}];
        this.setTeacherData.map((e, index) => {
          list.push({
            course_id: e.course_id,
            teacher_id: e.teacher_id,
          })
        })


        var _this = this;
        _this.setTeacherSureFlag = true;
        var id = _this.setTeacherClassId;
        let postData = JSON.stringify(list);





      },
      addClassSureBtn() { //添加班级确定按钮
        if (this.trim(this.addClassData.name) === '') {
          this.$message.error('班级名不能为空');
          return;
        } else if (this.trim(this.addClassData.start_date) === '') {
          this.$message.error('开班日期不能为空');
          return;
        } 
        // else if (this.trim(this.addClassData.nickname) === '') {
        //   this.$message.error('班级别名不能为空');
        //   return;
        // }
         else if (this.addClassData.headteacher_id === '') {
          this.$message.error('班主任不能为空');
          return;
        }
        var _this = this;
        _this.addClassSureFlag = true;



      },
      trim(str) {
        return str.replace(/(^\s*)|(\s*$)/g, "");
      },
      addBatchBtn() {

        if (this.trim(this.addClassData.start_date) === '') {
          this.$message.error('开班日期不能为空');
          return;
        } else if (this.addClassData.num - 0 > 50) {
          this.addClassData.num = 50;
        } else if (this.addClassData.num - 0 < 1) {
          this.addClassData.num = 1;
        }



        // // console.log(postData)
        var _this = this;
        _this.addBatchBtnFlag = true;

       
      },
      getTeachList() {
        var _this = this;



      },
      keyWatch(val) { // 实时监听数据变化
       this.changeIndex++;
      }
    },
    watch: {
      key(val) { // 实时监听数据变化
        this.keyWatch(val)
      }
    },

    beforeRouteEnter(to, from, next) {
      //传给父组建值
      next(vm => {
        vm.$emit('pageName', to.name)
      });


    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

  .chooseBox {
    margin: 0;
    width: 226px;
    position: relative;
    /* padding-right: 56px; */
    box-sizing: border-box;
  }

  .classManagement_alert_li span {
    position: relative;
  }




  .classManagement_alertBox.addClass {
    width: 833px;
    height: 376px;
  }

  /* ::-webkit-scrollbar {
        隐藏滚轮
        display: none;
    } */

  .classManagement_alertBox.setTeacher {
    width: 818px;
    /* height: 710px; */

  }

  .classManagement_alertBox.setTeacher .message-box__content::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 10px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
  }

  .classManagement_alertBox.setTeacher .message-box__content::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #d8d8d8;
  }

  .classManagement_alertBox.setTeacher .message-box__content::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    border-radius: 10px;
    background: #fff;
  }

  .classManagement_alertBox.setTeacher .message-box__content {
    max-height: 420px;
    overflow-y: scroll;
    padding: 0 68px 0 59px;
  }
  .common_alertBox_footer{
    padding: 35px 275px;
  }
  .classManagement_alertBox.setTeacher .classManagement_alert_li {
    height: 60px;
    border-bottom: 2px solid #ececec;
    box-sizing: border-box;

  }

  .classManagement_alertBox.setTeacher .classManagement_alert_right,
  .classManagement_alertBox.setTeacher .classManagement_alert_left {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;

  }


  .classManagement_alertBox.setTeacher .chooseBox span {
    margin-left: 26px;

  }

  .classManagement_alertBox.setTeacher .select {
    text-align: left;
  }


  .classManagement_alert_li {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-bottom: 16px;
  }

  .classManagement_alert_right,
  .classManagement_alert_left {
    width: 50%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }



  .message-box__sureBtn .pages_form_btnBox {
    font-size: 18px;
    color: #757575;
  }

  .disableClick {
    color: #bebebe;
  }

  .common_form_btn_min {
    margin-right: 13px;
  }

  .pages_form_btn_next {
    margin-right: 10px;
  }

  .pages_form_btn_max {
    margin-right: 32px;
  }

  .pages_form_btn_total {
    margin-right: 35px;
  }

  .pages_form_btn_last {
    margin-right: 26px;
  }

  .pages_form_btn_num {
    width: 37px;
    height: 37px;
    background: #fff;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
    line-height: 37px;
    text-align: center;
    border-radius: 50%;
    margin-right: 26px;
  }

  .class {
    position: relative;
    width: 100%;
    height: 100%;
    /* border-top: 1px solid rgba(0, 0, 0, 0); */
  }

  .classManagementList {
    width: 100%;
    height: 100%;
    margin-top: 0;
    position: relative;
  }

  .title .common_alertBox_li_left,
  .title .common_alertBox_li_right {
    justify-content: center;
  }

  .classManagement_title {
    position: absolute;
    left: 0;
    top: 100px;
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: space-between;
  }

  .classManagement_title_left {
    font-size: 22px;
    line-height: 60px;
    font-weight: 900;
    margin-left: 10px;
    color: #636363;
  }

  .classManagement_title_right {
    display: flex;
    align-items: center;
  }

  .classManagement_title_btn {
    margin-right: 30px;
    /* width: 180px; */
    padding: 0 27px;
    height: 34px;
    background: #2286cf;
    border-radius: 34px;
    line-height: 34px;
    color: #fff;
  }



  .campusManagementBox {
    width: 100%;
    height: 100%;
    padding-top: 98px;
    position: relative;
  }

  .campus {
    width: 100%;
    height: 100%;
    background: #fff;
    padding-top: 60px;
    position: relative;
  }

  .campusManagement_title {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: space-between;
  }

  .campusManagement_title_left {
    font-size: 22px;
    line-height: 60px;
    font-weight: 900;
    margin-left: 10px;
  }

  .campusManagement_title_right {
    display: flex;
    align-items: center;
  }


  .campusManagement_weekName {
    position: absolute;
    left: 0;
    top: 60px;
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: space-between;
    line-height: 40px;
  }

  .weekName_title {
    width: 10%;
  }

  .weekName_li {
    width: 18%;
  }

  .commonBox_courseTableBox {
    width: 100%;
    height: 100%;
    display: flex;
  }

  .commonBox_courseTable_left {
    width: 10%;
  }

  .commonBox_courseTable_right {
    width: 90%;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
  }

  .commonBox_courseTable_left_li {
    height: 16.67%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .commonBox_courseTable_right_li {
    width: 19.7%;
    height: 16%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #4db3f8;
    border-radius: 4px;
    font-size: 28px;
    color: #fff;
  }

  /* 更正 */

  .common_alertBox_content {
    padding: 0 80px;
  }

  .addClass {
    width: 833px;
    height: 376px;
  }

  .common_alertBox_li_right {
    width: 70%;
  }

  .common_alertBox_li_right,
  .common_alertBox_li_left {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* 更正 */

</style>
